<template>
  <div>
    <RecycleScroller
        class="scroller"
        :items="items"
        :item-size="30"
        :emitUpdate="true"
        @update="update"
        @resize="resize"
        @visible="visible"
        @hidden="hidden"
        @scroll="scroll"
        v-if="items.length"
    >
      <template slot-scope="props">
        <li :key="props.itemKey">
          <div>{{ props.item.title }}</div>
          <img :src="props.item.img" alt=""/>
        </li>
      </template>
    </RecycleScroller>
  </div>
</template>
<script>
export default {
  name: 'VueVirtualScrollerView',
  data() {
    return {
      items: []
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  methods: {
    getData() {
      for (let i = 0; i < 30; i++) {
        let item = {title: '标题'+i, id: i}
        this.items.push(item)
      }
    },
    scroll() {
      console.log(111)
    },
    update(start, end) {
      // console.log(start, end)
      if (end === this.items.length) {
        for (let i = end; i < 30 + end; i++) {
          let item = {title: '标题'+i, id: i}
          this.items.push(item)
        }
      }
    },
    resize() {
      console.log('resize')
    },
    visible() {
      console.log('visible')
    },
    hidden() {
      console.log('hidden')
    }
  }
}
</script>
<style lang="css" scoped>
.scroller {
  height: 300px;
  background-color: #ccc;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>
